<div class="pluginlist">
  <div class="pluginlist-section" ng-repeat="category in ctrl.viewModel">
    <h6 class="pluginlist-section-header">
      {{category.header}}
    </h6>
    <div class="pluginlist-item" ng-repeat="plugin in category.list">
      <a class="pluginlist-link pluginlist-link-{{plugin.state}} pointer" href="{{plugin.defaultNavUrl}}">
        <span>
          <img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image" />
          <span class="pluginlist-title">{{plugin.name}}</span>
          <span class="pluginlist-version">v{{plugin.info.version}}</span>
        </span>
        <span ng-if="ctrl.isAdmin">
          <span
            class="pluginlist-message pluginlist-message--update"
            ng-show="plugin.hasUpdate"
            ng-click="ctrl.updateAvailable(plugin, $event)"
            bs-tooltip="'新版本: ' + plugin.latestVersion"
          >
            更新可用！
          </span>
          <span class="pluginlist-message pluginlist-message--enable" ng-show="!plugin.enabled && !plugin.hasUpdate">
            立即启用
          </span>
          <span class="pluginlist-message pluginlist-message--no-update" ng-show="plugin.enabled && !plugin.hasUpdate">
            最新
          </span>
        </span>
      </a>
    </div>
    <div class="pluginlist-item" ng-show="category.list.length === 0">
      <a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="https://grafana.com/plugins">
        <span class="pluginlist-none-installed"
          >未安装。 <span class="pluginlist-emphasis">浏览 Grafana.com</span></span
        >
      </a>
    </div>
  </div>
</div>
